<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>我的订单</title>

    <link rel="stylesheet" href="../css/project.css">
    <script src="../js/libs/jquery-3.0.0.min.js"></script>
    <script src="../js/libs/jquery-weui.min.js"></script>
    <script src="../js/libs/vue2.0.js"></script>
    <script src="../js/project.js"></script>
    <style>
        body{ background-color: #f2f3f8; }
        .has-order .weui_cells:before, .weui_cells:after{ display: none; }
        .has-order .u-card{ margin: 10px 10px; }
        .has-order .weui_cells_title{ font-size: 12px; color: #8a90af; margin-top: 15px; }
        /* 图标 */
        .has-order .weui_cell_primary{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
        .has-order .order_id{ font-size: 14px; color: #68709a; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
        .has-order .order_title{ font-size: 16px; line-height: 30px; color: #333; }
        .has-order .order_price{ font-size: 23px; color: #333; }
        .has-order .order_protectedPerson{ font-size: 12px; color: #68709a; }

        .has-order .weui_cell.bottom{ font-size: 12px; color: #68709a; margin-left: 65px; }
        .has-order .weui_cell.bottom:before{ border-top: dashed 1px #bababa; }
        .has-order .weui_cell.bottom .weui_cell_ft{ color: #68709a; }
        .has-order .weui_btn{ line-height: 25px; font-size: 13px; }
        .has-order .weui_btn_plain_default{ background-color: #fff; }

        /* 没有订单 */
        .no-order{
            text-align: center;
            padding: 0 15px;
        }
        .no-order img{
            margin: 40px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-if="unPayList.length" class="has-order">
        <div class="weui_cells_title">待支付</div>
        <div class="weui_cells u-card" style="background-color: #fff;"
             v-for="item in unPayList" @click="jumpToDetail(item.id)">
            <div class="weui_cell top" style="padding-bottom: 4px;">
                <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-unPay"></i></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="order_id">订单号:{{item.id}}</div>
                    <h4 class="order_title">{{item.productTitle}}</h4>
                </div>
                <div class="weui_cell_ft order_price">￥{{item.premium/100}}</div>
            </div>
            <div class="weui_cell bottom">
                <div class="weui_cell_bd weui_cell_primary">被保人:{{item.insurantName}}</div>
                <div class="weui_cell_ft">保期:{{item.effectiveDateYMD}}-{{item.expiryDateYMD}}</div>
            </div>
        </div>
    </div>
    <div v-else class="no-order">
        <img src="../images/status_1.png" alt="" width="160" height="170">
        <a href="../index.html" class="weui_btn">去购买</a>
    </div>
</div>
<script>
    var vm = new Vue( {
        el: '#app',
        data: function () {
            return {
                unPayList: [

                ]
            }
        },
        methods: {
            jumpToDetail: function (orderId) {
                window.location.href = 'fillInformation.html?orderId='+orderId;
            }
        },
        created: function () {
            // 获取未支付订单数据
            var url = '/wego168-xsinsurance-wechat/order/listJson.jsp';
            $.get(url, function (data) {
                data = JSON.parse(data);
                console.log(data);
                if(data.errcode === 0){
                    data.unPayList.forEach(function (item) {
                        item.effectiveDateYMD = String(item.effectiveDateYMD).slice(2).replace(/-/g,".");
                        item.expiryDateYMD = String(item.expiryDateYMD).slice(2).replace(/-/g,".");
                    });
                    vm.unPayList = data.unPayList;
                }
            });
        }
    } )
</script>

</body>
</html>